<template>
    <div class="login-container" v-if="!isRegister">
        <div class="login-form">
            <h2 class="login-title">用户登录</h2>
            <el-form :model="loginForm" :rules="rules" ref="loginFormRef" hide-required-asterisk="true">
                <el-form-item label="账号" prop="username" required>
                    <el-input v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" required>
                    <el-input type="password" v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login" style="width: 100%;">登录</el-button>
                </el-form-item>
                <el-form-item>
                    没有账号？
                    <el-link type="info" :underline="false" @click="isRegister = true">
                        点击注册
                    </el-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
    <div class="login-container" v-else="isRegister">
        <div class="login-form">
            <h2 class="login-title">用户注册</h2>
            <el-form :model="registerForm" :rules="rules" hide-required-asterisk="true">
                <el-form-item label="账号" prop="username" required>
                    <el-input v-model="registerForm.username"></el-input>
                </el-form-item>
                <!-- <el-form-item label="昵称" prop="nickname" required>
                    <el-input v-model="registerForm.nickname"></el-input>
                </el-form-item> -->
                <el-form-item label="密码" prop="password" required>
                    <el-input type="password" v-model="registerForm.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="rePassword" required>
                    <el-input type="password" v-model="registerForm.rePassword"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="register" style="width: 100%;">注册</el-button>
                </el-form-item>
                <el-form-item>
                    已有账号？
                    <el-link type="info" :underline="false" @click="isRegister = false">
                        点击登录
                    </el-link>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const isRegister = ref(false);

const loginForm = ref({
    username: '',
    password: '',
    rememberMe: false
});

const registerForm = ref({
    username: '',
    // nickname: '',
    password: '',
    rePassword: ''
})


const checkRePassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== registerForm.value.password) {
        callback(new Error("两次密码不一致！"))
    } else {
        callback()
    }
}

const rules = {
    username: [
        { required: true, message: '请输入账号', trigger: 'blur' },
        { min: 3, max: 10, message: '长度为3~10位', trigger: 'blur' }
    ],
    nickname: [
        { required: true, message: '请输入昵称', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 18, message: '长度为6~18位', trigger: 'blur' }
    ],
    rePassword: [
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: checkRePassword, trigger: 'blur' }
    ]
};

const loginFormRef = ref(null);

import { userLoginService, userRegisterService } from '../api/user';
import { useRouter } from 'vue-router'; 
const router = useRouter();
const login = async () => {
    let result = await userLoginService(loginForm.value);
    ElMessage.success("登录成功");
    router.push('/')
};

const register = async () => {
    let result = await userRegisterService(registerForm.value);
    ElMessage.success("注册成功");

};
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f2f5;
    background-image: url('../assets/rice.png');
    background-size: cover;
}

.login-form {
    width: 300px;
    padding: 40px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
}

.login-title {
    margin-top: 0px;
    margin-bottom: 40px;
    font-size: 24px;
    color: #333;
}

::v-deep .el-form-item__label {
    width: 70px;
    display: inline;
    text-align-last: justify;
}
</style>